<template>
  <div id="member-detail" class="mt-5">
    <nav aria-label="breadcrumb" role="navigation">
      <ol class="breadcrumb pb-0">
        <li class="breadcrumb-item">
          <router-link to="/admin/members">会员</router-link>
        </li>
        <li class="breadcrumb-item active">详情</li>

        <span class="ms-auto me-1" @click.stop="back()">返回</span>
      </ol>
    </nav>
    <div class="card" v-if="user !== null">
      <div class="card-body">
        <dl class="row mb-0">
          <dt class="col-3 text-end">登录名</dt>
          <dd class="col-9">
            {{ user.username }}
          </dd>
          <dt class="col-3 text-end">用户名称</dt>
          <dd class="col-9">
            {{ user.empname }}
          </dd>
          <dt class="col-3 text-end">企业名称</dt>
          <dd class="col-9">{{ user.corpName }}</dd>
          <dt class="col-3 text-end">手机</dt>
          <dd class="col-9">{{ user.mobileNo }}</dd>
          <dt class="col-3 text-end">邮件</dt>
          <dd class="col-9">{{ user.email }}</dd>
          <dt class="col-3 text-end">微信用户(已绑定)</dt>
          <dd class="col-9">
            <template v-for="info of user.wxsUsers">
              <div
                class="mb-2 align-items-center border-bottom"
                :key="`wxs_user_` + info.openId"
              >
                <img :src="info.avatar" width="25" height="25" />
                <span class="text-truncate" style="max-width: 80px">
                  {{ info.nick }}
                </span>
                <span
                  class="float-end small text-danger"
                  @click.stop="unbindWeixinUser(user.id, info.openId)"
                  >解绑</span
                >
              </div>
            </template>
          </dd>
          <dt class="col-3 text-end"></dt>
          <dd class="col-9"></dd>
        </dl>
      </div>
      <table class="table table-sm table-striped caption-top">
        <caption>
          微信公众号用户列表
        </caption>
        <thead>
          <tr>
            <th>昵称</th>
            <th>关注时间</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="info in wxsUsers" :key="`user_` + info.id">
            <td>
              <img :src="info.headimgurl" width="25" height="25" />
              <span class="text-truncate" style="max-width: 80px">{{
                info.nickname
              }}</span>
            </td>
            <td>{{ info.subscribe_time }}</td>
            <td>
              <button
                type="button"
                class="btn btn-sm btn-success"
                @click.stop="bindWeixinUser(user.id, info.weixinOpenId)"
              >
                绑定
              </button>
            </td>
          </tr>
        </tbody>
      </table>
      <nav id="pagination-box" class="float-end">
        <my-pagination
          name="pagination"
          :row-count="sc.rowCount"
          :page-total="sc.pageTotal"
          :page-no="sc.pageNo"
          @next-page="nextPage"
          @prev-page="prevPage"
          @direct-page="directPage"
        ></my-pagination>
      </nav>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import { searchMember, bindWeixinUser, unbindWeixinUser } from "@/api/admin.js";
import { searchUsers } from "@/api/wxs.js";
import MyPagination from "@/components/my-pagination_h5.vue";

export default {
  components: {
    MyPagination,
  },
  data() {
    return {
      id: 0,
      user: null,

      wxsUsers: [],
      sc: {
        rowCount: 0,
        pageNo: 1,
        pageSize: 10,
        pageTotal: 0,
      },
    };
  },
  mounted: function () {
    this.id = parseInt(this.$route.params.id);
    this.search();
    this.searchWxsUsers();
  },
  methods: {
    back: function () {
      this.$router.go(-1);
    },
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    showLoading: function (loadingText) {
      this.$store.commit("showLoading", {
        loading: true,
        loadingText: loadingText,
      });
    },
    hideLoading: function () {
      this.$store.commit("showLoading", { loading: false });
    },
    search: function () {
      searchMember(this.id, (v) => {
        this.user = v;
      });
    },
    bindWeixinUser: function (userId, openId) {
      const params = { openId: openId };
      bindWeixinUser(userId, params, (v) => {
        if (v.status === "OK") {
          this.showErrMsg("操作成功");
          this.search();
        } else {
          this.showErrMsg("操作失败: " + v.errmsg, "danger");
        }
      });
    },
    unbindWeixinUser: function (userId, openId) {
      const params = { openId: openId };
      unbindWeixinUser(userId, params, (v) => {
        if (v.status === "OK") {
          this.showErrMsg("操作成功");
          this.search();
        } else {
          this.showErrMsg("操作失败: " + v.errmsg, "danger");
        }
      });
    },
    searchWxsUsers: function () {
      const params = {
        "sc.pageNo": this.sc.pageNo,
        "sc.pageSize": this.sc.pageSize,
      };

      searchUsers(params, (v) => {
        this.wxsUsers = v.dataList;
        this.sc = v.page;
      });
    },
    prevPage: function () {
      this.sc.pageNo = this.sc.pageNo - 1;
      if (this.sc.pageNo < 1) this.sc.pageNo = 1;
      this.searchWxsUsers();
    },
    nextPage: function () {
      this.sc.pageNo = this.sc.pageNo + 1;
      this.searchWxsUsers();
    },
    directPage: function (pageNo) {
      this.sc.pageNo = pageNo;
      this.searchWxsUsers();
    },
  },
};
</script>